<template>
  <div class="registerDetail">
    <van-nav-bar
      :fixed="true"
      :placeholder="true"
      :title="$route.meta.title"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <!-- 详情 -->
    <div class="detail_header flex">
      <div class="detail_header_lt" @click="goCarDetail()">
        <div class="carNo flex">
          {{ dataSource.carNo }}
          <i class="iconfont icon-right"></i>
        </div>
        <div class="hank">{{ dataSource.insCmp }}</div>
      </div>
      <div class="detail_header_rt">
        <a class="flex" @click="handleTel(dataSource.mobile)">
          <i class="iconfont icon-tel"></i>
          <div class="txt">联系车主</div>
        </a>
      </div>
    </div>
    <!-- 表单 -->
    <div class="formData">
      <van-field
        readonly
        v-model="dataSource.billNumber"
        name="保险登记单号"
        label="保险登记单号"
        input-align="right"
      />

      <van-field
        readonly
        v-model="dataSource.insCmp"
        name="保险公司"
        label="保险公司"
        input-align="right"
      />

      <van-field
        readonly
        v-model="dataSource.beginTime"
        name="起保日期"
        label="起保日期"
        input-align="right"
      />

      <van-field
        readonly
        v-model="dataSource.endTime"
        name="终保日期"
        label="终保日期"
        input-align="right"
      />

      <van-field
        readonly
        v-model="dataSource.outBillDateEx"
        name="出单日期"
        label="出单日期"
        input-align="right"
      />
      <van-field
        v-model="dataSource.remark"
        name="备注"
        label="备注"
        type="textarea"
        input-align="left"
        readonly
        autosize
      />
    </div>
    <!-- 底部tab -->
    <div class="tabBarBox">
      <van-tabs v-model="tabActive">
        <van-tab title="支付信息">
          <div class="tabCar">
            <van-field
              v-model="dataSource.acciInsAmount"
              name="交强险金额"
              label="交强险金额"
              input-align="right"
              readonly
            />
            <van-field
              v-model="dataSource.comInsAmount"
              name="商业险金额"
              label="商业险金额"
              input-align="right"
              readonly
            />
            <van-field
              v-model="dataSource.vehicleTaxAmount"
              name="车船税"
              label="车船税"
              input-align="right"
              readonly
            />
            <van-field
              v-model="dataSource.otherAmt"
              name="驾意险金额"
              label="驾意险金额"
              input-align="right"
              readonly
            />
            <van-field
              v-model="dataSource.rotalReturnAmt"
              name="返点金额合计"
              label="返点金额合计"
              input-align="right"
              readonly
            />
            <van-field
              v-model="dataSource.recAmt"
              name="已收款金额"
              label="已收款金额"
              input-align="right"
              readonly
            />
            <van-field
              v-model="dataSource.invAmt"
              name="已开票金额"
              label="已开票金额"
              input-align="right"
              readonly
            />
            <van-field
              v-model="dataSource.collectionDate"
              name="收款日期"
              label="收款日期"
              input-align="right"
              readonly
            />
            <van-field
              v-model="dataSource.invoiceDate"
              name="开票日期"
              label="开票日期"
              input-align="right"
              readonly
            />
          </div>
        </van-tab>
        <van-tab title="险种信息">
          <div class="insInfo">
            <van-field
              v-model="dataSource.inscmpBillNo"
              name="商业保险单号"
              label="商业保险单号"
              input-align="right"
              readonly
            />
            <van-field
              v-model="dataSource.inscmpAcciBillNo"
              name="交强险险单号"
              label="交强险险单号"
              input-align="right"
              readonly
            />
            <table class="tablebox" v-if="dataSource.kdtEntry.length != 0">
              <tr>
                <th>投保险种</th>
                <th>保险限额</th>
                <th>保费金额</th>
                <th>批增时间</th>
              </tr>
              <tr v-for="(item, index) in dataSource.kdtEntry" :key="index">
                <td>{{ item.insuranceTypeName }}</td>
                <td>{{ item.insLimitAmt }}</td>
                <td>{{ item.insuranceAmount }}</td>
                <td>{{ item.addDate }}</td>
              </tr>
            </table>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import { Empty, Field, Form, DatetimePicker, Tab, Tabs, Toast } from "vant";
import repairApi from "@/api/repairApi";
import { getCookies, isPhone } from "../../utils/util";
import commonApi from "@/api/commonApi";
import policyApi from "@/api/policyApi";
export default {
  name: "policyRobotDetail",
  components: {
    Empty,
    Field,
    Form,
    DatetimePicker,
    Tab,
    Tabs,
    Toast,
  },
  data() {
    return {
      dataSource: {
        billId: "", //单据ID
        billNumber: "", //单据编码
        bizDate: "", //登记时间
        carNo: "", //车牌号
        insurance: "", //保险类型
        insuranceType: "", //保险分类
        vinCode: "", //车架号
        carModelName: "", //车型
        customerName: "", //客户名称
        mobile: "", //电话
        fixCenterName: "", //维修中心
        insCmp: "", //保险公司
        outBillDateEx: "", //登记时间
        acciInsAmount: "", //交强险金额
        comInsAmount: "", //商业险金额
        vehicleTaxAmount: "", //车船税
        otherAmt: "", //车架意金额
        beginTime: "", //起保日期
        endTime: "-", //终保日期
        insPsn: "", //被保险人
        insPhone: "", //被保险人电话
        totalAmout: "", //总保费
        remark: "", //备注
        isQ3: "", //是否Q3
        bizSrc: "", //业务来源
        directSelling: "", //直销业务
        policyStatus: "", //保单状态
        billStatus: "", //单据状态
        temp: "", //服务顾问
        saleTypes: "", //销售类型
        isTurnIns: "", //是否转报
        dqxOption: "", //盗枪险类型
        rotalReturnAmt: "", //返点金额合计
        recAmt: "", //已开款金额
        invAmt: "", //已开票金额
        collectionDate: "", //收款日期
        invoiceDate: "", //开票日期
        inscmpBillNo: "", //商业保险单号
        inscmpAcciBillNo: "", //交强险单号
        kdtEntry: [
          // {
          //   entryId: "", //分录id
          //   insuranceType: "", //投险投保
          //   insuranceAmount: "", //保费金额
          //   insLimitAmt: "", //保费限额
          //   addDate: "", //批增时间
          //   name: "",
          // },
        ],
      },
      detailId: "",
      tabActive: 0,
      userId: getCookies("userId"),
    };
  },

  mounted() {
    if (this.$route.query) {
      this.detailId = this.$route.query.billId;
      this.getDetail(this.detailId);
    }
  },
  methods: {
    getDetail(billId) {
      console.log(billId);
      policyApi
        .queryBillInsuranceById({
          billId,
          userId: this.userId,
        })
        .then((res) => {
          if (res.data) {
            this.dataSource = res.data;
          }
        });
    },
    handleTel(tel) {
      if (isPhone()) {
        window.location.href = `tel:${tel}`;
      } else {
        Toast("请在手机端使用此功能");
      }
    },
    goCarDetail() {
      this.$router.push({
        path: "/carOrderDetail",
        query: { billId: this.dataSource.carId },
      });
    },
    onClickLeft() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="less" scoped>
.flex {
  display: flex;
  align-items: center;
}
.registerDetail {
  background: #f3f3f3;
  overflow: hidden;
  .detail_header {
    justify-content: space-between;
    margin: 0.2rem 0.2rem;
    border-radius: 5px;
    background: #fff;
    padding: 0.3rem;
    .detail_header_lt {
      .carNo {
        font-size: 0.32rem;
        font-weight: bold;
        margin-bottom: 0.2rem;
        .icon-right {
          margin-left: 0.2rem;
          color: #409eff;
        }
      }
      .hank {
        font-size: 0.28rem;
        color: #666;
      }
    }
    .detail_header_rt {
      justify-content: flex-start;
      .txt {
        font-size: 0.28rem;
        color: #161616;
      }
      .icon-tel {
        color: #fff;
        background: #35bc04;
        font-size: 0.32rem;
        padding: 0.1rem;
        border-radius: 50%;
        margin-right: 0.1rem;
      }
    }
  }
  .formData {
    background: #fff;
  }
}

.label_item {
  color: #35bc04;
  border: 1px solid #35bc04;
  border-radius: 4px;
  margin-right: 0.1rem;
  padding: 0.01rem 0.2rem;
  font-size: 0.2rem;
  &:last-child {
    margin-right: 0;
  }
}
.tabBarBox {
  margin-top: 0.2rem;
}
.tabCar {
  margin-top: 0.1rem;
}

.insInfo {
  background: #fff;
  overflow: hidden;
  padding-bottom: 0.3rem;
}
.tablebox {
  width: 95%;
  margin: auto;
  border-collapse: collapse;
  text-align: center;

  tr {
    th {
      font-size: 0.24rem;
      border: 1px solid #ccc;
      padding: 0.2rem 0;
      background: #f1f1f1;
    }
    td {
      padding: 0.1rem 0;
      border: 1px solid #ccc;
      font-size: 0.24rem;
    }
  }
}
</style>
